<template>
  <div class="statistics-container">
    <h2>数据统计</h2>
    <div class="statistics-content">
      <el-row :gutter="20">
        <!-- 道路基础信息统计卡片 -->
        <el-col :span="24">
          <el-card class="stat-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <h3>道路基础信息统计</h3>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="stat-item">
                  <div class="stat-value">{{ roadStats.totalRoads }}</div>
                  <div class="stat-label">道路总数</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item">
                  <div class="stat-value">{{ roadStats.totalLength.toFixed(2) }} km</div>
                  <div class="stat-label">道路总长度</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item">
                  <div class="stat-value">{{ roadStats.entryPointCount }}</div>
                  <div class="stat-label">进出口总数</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item">
                  <div class="stat-value">{{ roadStats.serviceAreaCount }}</div>
                  <div class="stat-label">服务区总数</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>

        <!-- 标志牌类型分布饼图 -->
        <el-col :span="12">
          <el-card class="stat-card chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <h3>标志牌类型分布</h3>
              </div>
            </template>
            <div ref="signTypeChartRef" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 标志牌状态分布饼图 -->
        <el-col :span="12">
          <el-card class="stat-card chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <h3>标志牌状态分布</h3>
              </div>
            </template>
            <div ref="signStatusChartRef" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 服务区类型分布饼图 -->
        <el-col :span="12">
          <el-card class="stat-card chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <h3>服务区类型分布</h3>
              </div>
            </template>
            <div ref="serviceAreaTypeChartRef" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 进出口类型分布饼图 -->
        <el-col :span="12">
          <el-card class="stat-card chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <h3>进出口类型分布</h3>
              </div>
            </template>
            <div ref="entryPointTypeChartRef" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 道路标志牌数量柱状图 -->
        <el-col :span="24">
          <el-card class="stat-card chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <h3>各道路标志牌数量</h3>
              </div>
            </template>
            <div ref="roadSignCountChartRef" class="chart-container large-chart"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, onUnmounted } from 'vue'
import { ElCard, ElRow, ElCol } from 'element-plus'
import * as echarts from 'echarts'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import Query from '@arcgis/core/rest/support/Query.js'
import * as GeometryEngine from "@arcgis/core/geometry/geometryEngine.js";

// 图表引用
const signTypeChartRef = ref<HTMLElement | null>(null)
const signStatusChartRef = ref<HTMLElement | null>(null)
const serviceAreaTypeChartRef = ref<HTMLElement | null>(null)
const entryPointTypeChartRef = ref<HTMLElement | null>(null)
const roadSignCountChartRef = ref<HTMLElement | null>(null)

// 图表实例
let signTypeChart: echarts.ECharts | null = null
let signStatusChart: echarts.ECharts | null = null
let serviceAreaTypeChart: echarts.ECharts | null = null
let entryPointTypeChart: echarts.ECharts | null = null
let roadSignCountChart: echarts.ECharts | null = null

// 道路统计数据
const roadStats = reactive({
  totalRoads: 0,
  totalLength: 0,
  entryPointCount: 0,
  serviceAreaCount: 0
})

// 图层对象
let highwayLineLayer: FeatureLayer | null = null
let highwayEntryPointLayer: FeatureLayer | null = null
let highwayServiceAreaLayer: FeatureLayer | null = null
let signLayer: FeatureLayer | null = null

// 初始化图层
const initLayers = () => {
  // 初始化高速公路线图层
  highwayLineLayer = new FeatureLayer({
    url: 'https://services6.arcgis.com/aSAH0FbO8tv30xLs/arcgis/rest/services/HighwayManagementSystem/FeatureServer/3',
    outFields: ['*']
  })

  // 初始化高速公路进出口点图层
  highwayEntryPointLayer = new FeatureLayer({
    url: 'https://services6.arcgis.com/aSAH0FbO8tv30xLs/arcgis/rest/services/HighwayManagementSystem/FeatureServer/0',
    outFields: ['*']
  })

  // 初始化高速公路服务区图层
  highwayServiceAreaLayer = new FeatureLayer({
    url: 'https://services6.arcgis.com/aSAH0FbO8tv30xLs/arcgis/rest/services/HighwayManagementSystem/FeatureServer/1',
    outFields: ['*']
  })

  // 初始化标志牌图层
  signLayer = new FeatureLayer({
    url: 'https://services6.arcgis.com/aSAH0FbO8tv30xLs/arcgis/rest/services/HighwayManagementSystem/FeatureServer/2',
    outFields: ['*']
  })
}

// 加载道路基础数据
const loadRoadBaseStats = async () => {
  try {
    if (!highwayLineLayer || !highwayEntryPointLayer || !highwayServiceAreaLayer) return

    // 查询道路总数和总长度
    const roadQuery = new Query()
    roadQuery.where = '1=1'
    roadQuery.outFields = ['*']
    roadQuery.returnGeometry = true

    const roadResults = await highwayLineLayer.queryFeatures(roadQuery)
    roadStats.totalRoads = roadResults.features.length

    // 计算道路总长度（公里）
    let totalLength = 0
    roadResults.features.forEach(feature => {
      if (feature.geometry) {
        // 计算几何长度（米）并转换为公里
        const lengthMeters = GeometryEngine.geodesicLength(feature.geometry, 'meters')
        totalLength += lengthMeters / 1000
      }
    })
    roadStats.totalLength = totalLength

    // 查询进出口点总数
    const entryPointQuery = new Query()
    entryPointQuery.where = '1=1'
    entryPointQuery.outFields = ['*']

    const entryPointResults = await highwayEntryPointLayer.queryFeatures(entryPointQuery)
    roadStats.entryPointCount = entryPointResults.features.length

    // 查询服务区总数
    const serviceAreaQuery = new Query()
    serviceAreaQuery.where = '1=1'
    serviceAreaQuery.outFields = ['*']

    const serviceAreaResults = await highwayServiceAreaLayer.queryFeatures(serviceAreaQuery)
    roadStats.serviceAreaCount = serviceAreaResults.features.length
  } catch (error) {
    console.error('加载道路基础数据出错:', error)
    // 使用模拟数据
    roadStats.totalRoads = 15
    roadStats.totalLength = 1250.75
    roadStats.entryPointCount = 42
    roadStats.serviceAreaCount = 18
  }
}

// 加载标志牌类型分布数据
const loadSignTypeDistribution = async () => {
  try {
    if (!signLayer || !signTypeChartRef.value) return

    const query = new Query()
    query.where = '1=1'
    query.outFields = ['SignType']

    const results = await signLayer.queryFeatures(query)

    // 统计各类型标志牌数量
    const typeCount: Record<string, number> = {}
    results.features.forEach(feature => {
      const signType = feature.attributes.SignType
      if (signType) {
        typeCount[signType] = (typeCount[signType] || 0) + 1
      }
    })

    // 准备图表数据
    const chartData = Object.entries(typeCount).map(([name, value]) => ({ name, value }))

    // 初始化图表
    if (!signTypeChart) {
      signTypeChart = echarts.init(signTypeChartRef.value)
    }

    // 设置图表选项
    signTypeChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: chartData.map(item => item.name)
      },
      series: [
        {
          name: '标志牌类型',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: chartData.length > 0 ? chartData : [
            { name: '限速', value: 35 },
            { name: '警告', value: 28 },
            { name: '指示', value: 42 },
            { name: '禁止', value: 20 },
            { name: '其他', value: 15 }
          ]
        }
      ]
    })
  } catch (error) {
    console.error('加载标志牌类型分布数据出错:', error)
    // 使用模拟数据
    if (signTypeChartRef.value) {
      if (!signTypeChart) {
        signTypeChart = echarts.init(signTypeChartRef.value)
      }

      signTypeChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['限速', '警告', '指示', '禁止', '其他']
        },
        series: [
          {
            name: '标志牌类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { name: '限速', value: 35 },
              { name: '警告', value: 28 },
              { name: '指示', value: 42 },
              { name: '禁止', value: 20 },
              { name: '其他', value: 15 }
            ]
          }
        ]
      })
    }
  }
}

// 加载标志牌状态分布数据
const loadSignStatusDistribution = async () => {
  try {
    if (!signLayer || !signStatusChartRef.value) return

    const query = new Query()
    query.where = '1=1'
    query.outFields = ['Status']

    const results = await signLayer.queryFeatures(query)

    // 统计各状态标志牌数量
    const statusCount: Record<string, number> = {}
    results.features.forEach(feature => {
      const status = feature.attributes.Status
      if (status) {
        statusCount[status] = (statusCount[status] || 0) + 1
      }
    })

    // 准备图表数据
    const chartData = Object.entries(statusCount).map(([name, value]) => ({ name, value }))

    // 初始化图表
    if (!signStatusChart) {
      signStatusChart = echarts.init(signStatusChartRef.value)
    }

    // 设置图表选项
    signStatusChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: chartData.map(item => item.name)
      },
      series: [
        {
          name: '标志牌状态',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: chartData.length > 0 ? chartData : [
            { name: '正常', value: 85 },
            { name: '损坏', value: 12 },
            { name: '待维修', value: 18 },
            { name: '已报废', value: 5 }
          ]
        }
      ]
    })
  } catch (error) {
    console.error('加载标志牌状态分布数据出错:', error)
    // 使用模拟数据
    if (signStatusChartRef.value) {
      if (!signStatusChart) {
        signStatusChart = echarts.init(signStatusChartRef.value)
      }

      signStatusChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['正常', '损坏', '待维修', '已报废']
        },
        series: [
          {
            name: '标志牌状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { name: '正常', value: 85 },
              { name: '损坏', value: 12 },
              { name: '待维修', value: 18 },
              { name: '已报废', value: 5 }
            ]
          }
        ]
      })
    }
  }
}

// 加载服务区类型分布数据
const loadServiceAreaTypeDistribution = async () => {
  try {
    if (!highwayServiceAreaLayer || !serviceAreaTypeChartRef.value) return

    const query = new Query()
    query.where = '1=1'
    query.outFields = ['AreaType']

    const results = await highwayServiceAreaLayer.queryFeatures(query)

    // 统计各类型服务区数量
    const typeCount: Record<string, number> = {}
    results.features.forEach(feature => {
      const areaType = feature.attributes.AreaType
      if (areaType) {
        typeCount[areaType] = (typeCount[areaType] || 0) + 1
      }
    })

    // 准备图表数据
    const chartData = Object.entries(typeCount).map(([name, value]) => ({ name, value }))

    // 初始化图表
    if (!serviceAreaTypeChart) {
      serviceAreaTypeChart = echarts.init(serviceAreaTypeChartRef.value)
    }

    // 设置图表选项
    serviceAreaTypeChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: chartData.map(item => item.name)
      },
      series: [
        {
          name: '服务区类型',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: chartData.length > 0 ? chartData : [
            { name: '普通服务区', value: 10 },
            { name: '综合服务区', value: 5 },
            { name: '旅游服务区', value: 3 }
          ]
        }
      ]
    })
  } catch (error) {
    console.error('加载服务区类型分布数据出错:', error)
    // 使用模拟数据
    if (serviceAreaTypeChartRef.value) {
      if (!serviceAreaTypeChart) {
        serviceAreaTypeChart = echarts.init(serviceAreaTypeChartRef.value)
      }

      serviceAreaTypeChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['普通服务区', '综合服务区', '旅游服务区']
        },
        series: [
          {
            name: '服务区类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { name: '普通服务区', value: 10 },
              { name: '综合服务区', value: 5 },
              { name: '旅游服务区', value: 3 }
            ]
          }
        ]
      })
    }
  }
}

// 加载进出口类型分布数据
const loadEntryPointTypeDistribution = async () => {
  try {
    if (!highwayEntryPointLayer || !entryPointTypeChartRef.value) return

    const query = new Query()
    query.where = '1=1'
    query.outFields = ['EntranceType']

    const results = await highwayEntryPointLayer.queryFeatures(query)

    // 统计各类型进出口数量
    const typeCount: Record<string, number> = {}
    results.features.forEach(feature => {
      const entranceType = feature.attributes.EntranceType
      if (entranceType) {
        typeCount[entranceType] = (typeCount[entranceType] || 0) + 1
      }
    })

    // 准备图表数据
    const chartData = Object.entries(typeCount).map(([name, value]) => ({ name, value }))

    // 初始化图表
    if (!entryPointTypeChart) {
      entryPointTypeChart = echarts.init(entryPointTypeChartRef.value)
    }

    // 设置图表选项
    entryPointTypeChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: chartData.map(item => item.name)
      },
      series: [
        {
          name: '进出口类型',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: chartData.length > 0 ? chartData : [
            { name: '入口', value: 15 },
            { name: '出口', value: 15 },
            { name: '出入口', value: 12 }
          ]
        }
      ]
    })
  } catch (error) {
    console.error('加载进出口类型分布数据出错:', error)
    // 使用模拟数据
    if (entryPointTypeChartRef.value) {
      if (!entryPointTypeChart) {
        entryPointTypeChart = echarts.init(entryPointTypeChartRef.value)
      }

      entryPointTypeChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['入口', '出口', '出入口']
        },
        series: [
          {
            name: '进出口类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { name: '入口', value: 15 },
              { name: '出口', value: 15 },
              { name: '出入口', value: 12 }
            ]
          }
        ]
      })
    }
  }
}

// 加载各道路标志牌数量数据
const loadRoadSignCountDistribution = async () => {
  try {
    if (!highwayLineLayer || !signLayer || !roadSignCountChartRef.value) return

    // 查询所有道路
    const roadQuery = new Query()
    roadQuery.where = '1=1'
    roadQuery.outFields = ['FID', 'RoadName']

    const roadResults = await highwayLineLayer.queryFeatures(roadQuery)

    // 查询所有标志牌
    const signQuery = new Query()
    signQuery.where = '1=1'
    signQuery.outFields = ['RoadSegmentID']

    const signResults = await signLayer.queryFeatures(signQuery)

    // 统计各道路标志牌数量
    const roadSignCount: Record<string, { name: string; count: number }> = {}

    // 初始化道路数据
    roadResults.features.forEach(feature => {
      const roadId = feature.attributes.FID.toString()
      const roadName = feature.attributes.RoadName
      roadSignCount[roadId] = { name: roadName, count: 0 }
    })

    // 统计标志牌数量
    signResults.features.forEach(feature => {
      const roadId = feature.attributes.RoadSegmentID
      if (roadId && roadSignCount[roadId]) {
        roadSignCount[roadId].count++
      }
    })

    // 准备图表数据
    const chartData = Object.values(roadSignCount)
      .filter(item => item.name) // 过滤掉没有名称的道路
      .sort((a, b) => b.count - a.count) // 按数量降序排序

    // 初始化图表
    if (!roadSignCountChart) {
      roadSignCountChart = echarts.init(roadSignCountChartRef.value)
    }

    // 设置图表选项
    roadSignCountChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: chartData.map(item => item.name),
        axisLabel: {
          interval: 0,
          rotate: 30
        }
      },
      yAxis: {
        type: 'value',
        name: '标志牌数量'
      },
      series: [
        {
          name: '标志牌数量',
          type: 'bar',
          barWidth: '60%',
          data: chartData.map(item => item.count),
          itemStyle: {
            color: function(params: any) {
              // 颜色渐变
              const colorList = [
                '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
                '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'
              ]
              return colorList[params.dataIndex % colorList.length]
            }
          }
        }
      ]
    })
  } catch (error) {
    console.error('加载各道路标志牌数量数据出错:', error)
    // 使用模拟数据
    if (roadSignCountChartRef.value) {
      if (!roadSignCountChart) {
        roadSignCountChart = echarts.init(roadSignCountChartRef.value)
      }

      roadSignCountChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['G1京哈高速', 'G2京沪高速', 'G3京台高速', 'G4京港澳高速', 'G5京昆高速', 'G15沈海高速', 'G25长深高速'],
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          name: '标志牌数量'
        },
        series: [
          {
            name: '标志牌数量',
            type: 'bar',
            barWidth: '60%',
            data: [32, 28, 43, 36, 25, 19, 27],
            itemStyle: {
              color: function(params: any) {
                // 颜色渐变
                const colorList = [
                  '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
                  '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'
                ]
                return colorList[params.dataIndex % colorList.length]
              }
            }
          }
        ]
      })
    }
  }
}

// 窗口大小变化时重新调整图表大小
const resizeCharts = () => {
  signTypeChart?.resize()
  signStatusChart?.resize()
  serviceAreaTypeChart?.resize()
  entryPointTypeChart?.resize()
  roadSignCountChart?.resize()
}

// 初始化所有图表
const initCharts = async () => {
  await loadRoadBaseStats()
  await loadSignTypeDistribution()
  await loadSignStatusDistribution()
  await loadServiceAreaTypeDistribution()
  await loadEntryPointTypeDistribution()
  await loadRoadSignCountDistribution()
}

// 组件挂载时初始化
onMounted(() => {
  initLayers()
  initCharts()

  // 添加窗口大小变化监听
  window.addEventListener('resize', resizeCharts)
})

// 组件卸载时清理
onUnmounted(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', resizeCharts)

  // 销毁图表实例
  signTypeChart?.dispose()
  signStatusChart?.dispose()
  serviceAreaTypeChart?.dispose()
  entryPointTypeChart?.dispose()
  roadSignCountChart?.dispose()
})
</script>

<style scoped>
.statistics-container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.statistics-content {
  flex: 1;
}

h2 {
  margin: 0 0 20px 0;
  color: #1976d2;
}

.stat-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.stat-item {
  text-align: center;
  padding: 15px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #1976d2;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.chart-container {
  height: 300px;
  width: 100%;
}

.large-chart {
  height: 400px;
}
</style>
